<template>
  <div class="shop-info-wrap safe-area-bottom" >
    <van-nav-bar
        :title="pageTitle"
        left-arrow
        fixed
        :border="false"
        @click-left="onClickLeft"
    />

    <div class="search-box" >
        <div class="search-input" >
            <van-search
                v-model="searchValue"
                placeholder="请输入商品或者分类"
                @search="onSearch"
                :left-icon="searchHistoryIcon"
            >
            </van-search>
            
            <div class="search-btn active-btn" @click="handleToSearch" >搜索</div>
        </div>
    </div>
    <div class="tab-ul" >
        <div @click="handleToCurrent(0)" :class="['tab-li', current === 0 ? 'on' : '']" >综合</div>
        <div @click="handleToCurrent(1)" :class="['tab-li', current === 1 ? `on ${sortStatus}` : 'default']" >销量</div>
        <div @click="handleToCurrent(2)" :class="['tab-li', current === 2 ? 'on' : '']" >最新</div>
        <div @click="handleToCurrent(3)" :class="['tab-li', current === 3 ? `on ${sortStatus}` : 'default']" >价格</div>
    </div>

    <!-- 商品列表 -->
	<van-list
	  v-model="loadingPage"
	  :finished="finished"
	  :finished-text="list.length ? '没有更多了' : ''"
     @load="ajaxGoodList"
     :immediate-check="false"
	>
	<!-- -->
		<div v-if="finished && !list.length" class="empty-good" >
			<van-empty description="暂无商品" />
		</div>
		
		<!-- 商品列表 -->
		<div class="good-ul" >
			<goodItem
			v-for="(item, index) in list"
			:key="index"
			:item="item"
			isShop
			></goodItem>
		</div>
	
	</van-list>


  </div>
</template>

<script>
import {  searchHistoryIcon, sortDefault, sortDown, sortUp } from '@/tool/static-img';
import goodItem from './components/good-item';
import { GOOD_LIST } from '@/api/home';
export default {
    components:{
        goodItem
    },
    data() {
        return {
            searchHistoryIcon, sortDefault, sortDown, sortUp,
            pageTitle: localStorage.getItem('shopInfoName'),
            searchValue: '',
            current: 0,
            sortStatus: 'default',
			id: this.$route.query.id,
			
			// 分页
			page: 1,
			pageSize: 20,
			list: [],
			loadingPage: false,
			finished: false,
        }
    },
    activated(){
        this.pageTitle=localStorage.getItem('shopInfoName')
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            console.log(from.name);
            
            if(from.name == 'home'|| from.name == 'newArea' || from.name == 'goodList'  || from.name == 'goldShop' || from.name=='selection' || from.name==null) {
                vm.resetInit();
            }
        }) 
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onSearch(val) {
				
            this.resetInit();
        },
        // 去搜索
        handleToSearch() {
            
            this.onSearch(this.searchValue);
        },
        // 切换tab
        handleToCurrent(index) {
            if(this.current == index && (index == 0 || index == 2)) {
                return
            }
            
            // 自身时,有排序则改变
            if(this.current == index && (index == 1 || index == 3)) {
                if(this.sortStatus == 'default') {
                    this.sortStatus = 'sortDown';
                }else if(this.sortStatus == 'sortDown') {
                    this.sortStatus = 'sortUp';
                }else if(this.sortStatus == 'sortUp') {
                    this.sortStatus = 'default';
                }
            }else {
                this.sortStatus = 'default';
            }
            
            this.current = index;
            
            // 数据请求
            this.resetInit();
        },
		resetInit() { //重置
		  this.page = 1;
		  this.list = [];
		  this.finished = false;
		
		  this.loadingPage = true;
		  this.ajaxGoodList()
		},
        // 列表请求
        ajaxGoodList() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
			params['shop_id'] = this.$route.query.id;
            
            if(this.searchValue && this.searchValue.trim()) {
            	params['keyword'] = this.searchValue.trim();
            }

            if(this.$route.query.shopId) {
                params['shop_id'] = this.$route.query.shopId;
            }
            
            params['sort_type'] = this.current + 1;
            
            if((this.current == 1 || this.current == 3) && this.sortStatus != 'default') {
            	if(this.sortStatus == 'sortUp') {
            		params['sort_rule'] = 1;
            	}else if(this.sortStatus == 'sortDown') {
            		params['sort_rule']= 0;
            	}
            }
            
            this.$http.post(GOOD_LIST, params)
            .then(res => {
              const {
                list
              } = res.data;
            
              if(list && list.length) {
                 this.page++;
                 this.list = this.list.concat(list);
                 // 加载状态结束
                 this.loadingPage = false;
                 if(list.length < this.pageSize) {
                  this.finished = true;
                 }
              }else {
                this.finished = true;
              }
            })
        }
    }

}

</script>
<style lang="scss" >
.shop-info-wrap{

    min-height: 100vh;
    padding-top: 2.7rem;
    background-color: #F5F5F5;
	box-sizing: border-box;
    .van-nav-bar .van-icon{
        color: #333333;
    }
    .van-nav-bar__arrow{
        font-size: .4rem;
    }

    .search-box{
        position: fixed;
        top: 0.8rem;
        left: 0;
        width: 100%;
        padding: 0.1rem 0.32rem;
        border-bottom: 0.02rem solid #f5f5f5;
        background: #fff;
        box-sizing: border-box;
         .search-input{
            position: relative;
            width: 6.86rem;
            .search-btn{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.28rem;
                font-weight: 400;
                color: #fff;
                position: absolute;
                right: 0.06rem;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 1.12rem;
                height: 0.52rem;
                border-radius: 0.3rem;
                background: linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%);
            }
            .van-search{
                padding: 0;
                background-color: #f4f4f4;
                border-radius: 0.32rem;
                .van-search__content{
                    background-color: #f4f4f4;
                    border-radius: 0.32rem;
                    .van-cell{
                        align-items: center;
                        padding: .1rem .1rem .1rem 0;
                    }
                }
                .van-field__control{
                    height: .52rem;
                    width: 4rem;
                    line-height: .52rem;
                    font-weight: 400;
                    font-size: 0.28rem;
                }
                .van-icon{
                    height: .4rem;
                }
                .van-icon__image{
                    width: .4rem;
                    height: .4rem;
                }
            }
        }
    }

    .tab-ul{
        position: fixed;
        top: 1.72rem;
        left: 0;
        display: flex;
        width: 100%;
        height: .92rem;
        background: #ffffff;
        .tab-li{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            font-weight: 400;
            font-size: 0.32rem;
            color: #999999;
            &.on{
                font-weight: 500;
                font-size: 0.32rem;
                color: #1D69E4;
            }
            &.default{
                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0.4rem;
                    margin: auto;
                    width: 0.14rem;
                    height: 0.2rem;
                    background: url('../../images/sort-default.png') no-repeat center;
                    background-size: cover;
                }
            }
            &.sortDown{
                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0.4rem;
                    margin: auto;
                    width: 0.14rem;
                    height: 0.2rem;
                    background: url('../../images/sort-down.png') no-repeat center;
                    background-size: cover;
                }
            }
            &.sortUp{
                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0.4rem;
                    margin: auto;
                    width: 0.14rem;
                    height: 0.2rem;
                    background: url('../../images/sort-up.png') no-repeat center;
                    background-size: cover;
                }
            }
        }
    }

    .good-ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.24rem  0.24rem 0;
			
    }
   
}
</style>